<template>
  <div class="edit-wrap">

    <div class="edit-box1">

      <div class="company-box">
        <span class="title">企业名称：</span>
        <span class="company-name" @click="selectCompany" :class="{'init-color':mechanismName == ''}">{{mechanismName == ''?"请选择企业":mechanismName}}</span>
        <img src="../../../images/in.png" class="pic"/>
      </div>
    </div>

    <div class="edit-box2">

      <div class="pic-box">
        <span class="title">招聘封面：</span>
        <div class="pic-con">
          <img src="./upload.png" class="upload" v-if="!picture" onclick="return false"/>
          <img :src="picture" class="picture" v-else="picture" onclick="return false"/>
          <input type="file" class="photo" @change="changeImage($event)"
                 accept="image/gif,image/jpeg,image/jpg,image/png"/>
        </div>
      </div>

      <div class="company-box">
        <span class="title">招聘岗位：</span>
        <div class="name">
          <input type="text" class="company" v-model="postName" placeholder="请输入岗位名称" @blur="inputBlur" maxlength="15"/>
        </div>
      </div>

      <div class="lend-box">
        <span class="title">工种：</span>
        <van-radio-group v-model="workType" class="lend-radio">
          <van-radio :name=1 class="lend" checked-color="#FF8F33" :class="{'active':workType == 1}">小时工</van-radio>
          <van-radio :name=2 checked-color="#FF8F33" :class="{'active':workType == 2}">正式工</van-radio>
        </van-radio-group>
      </div>

      <div class="salary-box">
        <span class="title">薪资：</span>
        <div class="salary-con" v-if="workType == 2">
          <input type="text" class="salary1" placeholder="0.00" @blur="inputBlur" maxlength="5" v-model="startMoney"/>
          <span class="line"></span>
          <input type="text" class="salary2" placeholder="0.00" @blur="inputBlur" maxlength="5" v-model="endMoney"/>
        </div>

        <div class="salary-con" v-if="workType == 1">
          <input type="text" class="salary" placeholder="0.00" @blur="inputBlur" maxlength="5" v-model="hourMoney"/>
        </div>
        <span class="cell" v-if="workType == 1">元/小时</span>
        <span class="cell" v-else>元/月</span>
      </div>

      <div class="salary-box">
        <span class="title">返费金额：</span>
        <div class="salary-con">
          <input type="text" class="salary" placeholder="0.00" @blur="inputBlur" maxlength="5" v-model="returnFee"/>
        </div>
        <span class="cell" v-if="workType == 1">元/小时</span>
        <span class="cell" v-else>元/月</span>
      </div>

      <div class="fee-box">
        <span class="title">返费期限：</span>
        <popup-picker :data="columnList" v-model="picker" class="fee" placeholder="请选择返费期限"></popup-picker>
        <img src="../../../images/in.png" class="pic"/>
      </div>

    </div>

    <div class="edit-box3">

      <div class="explain-box" @click="commonPage('salaryexplain')">
        <span class="title">薪资说明：</span>
        <span class="explain">{{salaryText}}</span>
        <img src="../../../images/in.png" class="pic"/>
      </div>

      <div class="explain-box" @click="commonPage('foodexplain')">
        <span class="title">食宿说明：</span>
        <span class="explain">{{foodText}}</span>
        <img src="../../../images/in.png" class="pic"/>
      </div>

      <div class="explain-box" @click="commonPage('workexplain')">
        <span class="title">招聘要求：</span>
        <span class="explain">{{workText}}</span>
        <img src="../../../images/in.png" class="pic"/>
      </div>

    </div>

    <div class="btn-box" @click="previewPage">
      <button type="button" class="btn">预&nbsp;览</button>
    </div>
  </div>
</template>

<script>
  import {convertBase64ToBlob, getBase64, getSessionStore, setSessionStore} from "../../../config/util"
  import * as qiniu from 'qiniu-js'
  import {getQiniuToken, queryIssueWorkDetail} from "../../../axios/api"
  import {PopupPicker} from 'vux'

  export default {
    data() {
      return {
        picture: "",
        identity: "",
        workType: 1,
        columnList: [['1个月', '2个月', '3个月', '4个月', '5个月', '6个月']],
        picker: [],
        mechanismId: "",
        mechanismName: "",
        postName: "",
        hourMoney: "",
        returnFee: "",
        startMoney: "",
        endMoney: "",
        type: "",
        workId: "",
        salaryExplain: "",
        foodExplain: "",
        workExplain: "",
        flag: this.$route.query.flag
      }
    },
    mounted() {
      this.type = this.$route.query.type;
      this.mechanismId = this.$route.query.mechanismId;
      this.mechanismName = this.$route.query.mechanismName;
      this.identity = this.$store.getters.getIdentity;
      if (this.type == 1) {//新增
        this.initWork();
      } else {
        this.workId = this.$route.query.workId;
        let work = getSessionStore("work");
        if (work) {
          work = JSON.parse(work);
          this.picture = work.picture;
          this.postName = work.postName;
          this.workType = work.workType;
          this.hourMoney = work.hourMoney;
          this.returnFee = work.returnFee;
          this.picker.push(work.picker);
          this.startMoney = work.startMoney;
          this.endMoney = work.endMoney;
          if (!this.mechanismName) {
            this.mechanismName = work.mechanismName;
          }
        } else {
          this.queryWork();
        }
      }
    },
    computed: {
      salaryText() {
        let salary = "";
        if (this.type == 1) {
          salary = getSessionStore("salaryExplain");
        } else {
          salary = this.salaryExplain;
          if (salary) {
            setSessionStore("salaryExplain", salary);
          } else {

          }
          salary = getSessionStore("salaryExplain");
        }
        return salary ? "修改" : "未添加";
      },
      foodText() {
        let food = "";
        if (this.type == 1) {
          food = getSessionStore("foodExplain");
        } else {
          food = this.foodExplain;
          if (food) {
            setSessionStore("foodExplain", food);
          } else {
            food = getSessionStore("foodExplain");
          }
        }
        return food ? "修改" : "未添加";
      },
      workText() {
        let work = "";
        if (this.type == 1) {
          work = getSessionStore("workExplain");
        } else {
          work = this.workExplain;
          if (work) {
            setSessionStore("workExplain", work);
          } else {
            work = getSessionStore("workExplain");
          }
        }
        return work ? "修改" : "未添加";
      }
    },
    methods: {
      initWork() {//初始化
        let work = getSessionStore("work");
        if (work) {
          work = JSON.parse(work);
          this.picture = work.picture;
          this.postName = work.postName;
          this.workType = work.workType;
          this.hourMoney = work.hourMoney;
          this.returnFee = work.returnFee;
          this.picker.push(work.picker);
          this.startMoney = work.startMoney;
          this.endMoney = work.endMoney;
          if (!this.mechanismName) {
            this.mechanismName = work.mechanismName;
          }
        }
      },
      changeWorkType() {
        if (this.workType == 1) {
          this.startMoney = "";
          this.endMoney = "";
        } else {
          this.hourMoney = "";
        }
      },
      inputBlur() {
        window.scrollTo(0, 0);
      },
      commonPage(path) {//招聘、薪资、食宿
        this.shortWork();
        if (this.type == 1) {
          this.$router.push({
            path: path,
            query: {"mechanismId": this.mechanismId, "mechanismName": this.mechanismName, "type": 1}
          });
        } else {
          this.$router.push({
            path: path,
            query: {"workId": this.workId, "mechanismId": this.mechanismId, "type": 2, "flag": 1}
          });
        }
      },
      checkWork() {
        if (this.mechanismName == '' || this.mechanismName == undefined) {
          this.$vux.toast.text("请选择企业名称", "middle");
          return;
        }
        if (this.postName == '' || this.postName == undefined) {
          this.$vux.toast.text("请输入招聘岗位", "middle");
          return;
        }

        if (this.workType == 1) {
          if (this.hourMoney == '' || this.hourMoney == undefined) {
            this.$vux.toast.text("请输入薪资", "middle");
            return;
          }
        } else {
          if (this.startMoney == '' || this.startMoney == undefined) {
            this.$vux.toast.text("请输入薪资", "middle");
            return;
          }
          if (this.endMoney == '' || this.endMoney == undefined) {
            this.$vux.toast.text("请输入薪资", "middle");
            return;
          }
        }
        return true;
      },
      previewPage() {//预览
        if (this.checkWork()) {
          this.changeWorkType();
          this.shortWork();

          if (this.type == 1) {
            this.$router.push({
              path: "/workpublish",
              query: {
                "mechanismId": this.mechanismId,
                "mechanismName": this.mechanismName,
                "type": this.type
              }
            });
          } else {
            if (this.flag == 1) {
              this.$router.push({
                path: "/workpublish",
                query: {
                  "mechanismId": this.mechanismId,
                  "mechanismName": this.mechanismName,
                  "issueId": this.workId,
                  "type": this.type
                }
              });
            } else {
              this.$router.push({
                path: "/workpreview",
                query: {
                  "mechanismId": this.mechanismId,
                  "mechanismName": this.mechanismName,
                  "issueId": this.workId,
                  "type": this.type
                }
              });
            }
          }
        }
      },
      shortWork() {
        let work = {};
        work.picture = this.picture;
        work.postName = this.postName;
        work.workType = this.workType;
        work.hourMoney = this.hourMoney;
        work.returnFee = this.returnFee;
        work.picker = String(this.picker);
        work.startMoney = this.startMoney;
        work.endMoney = this.endMoney;
        work.mechanismName = this.mechanismName;
        setSessionStore("work", work);
      },
      selectCompany() {//企业列表
        this.shortWork();
        if (this.type == 1) {
          this.$router.push({path: "/choosecompany", query: {"mechanismId": this.mechanismId, "type": 1}});
        } else {
          this.$router.push({
            path: "/choosecompany",
            query: {"workId": this.workId, "mechanismId": this.mechanismId, "type": 2, "flag": 1}
          });
        }
      },
      changeImage(e) {//上传图片到七牛云
        if (e.target.files.length > 0) {
          getBase64(e.target, (url) => {
            this.picture = 'data:image/png;base64,' + url;//显示图片

            let params = {
              "sgin": this.identity
            };
            getQiniuToken(params).then((res) => {//获取uploadToken
              let resultObj = res.data;
              let file = convertBase64ToBlob(this.picture); //Blob 对象，上传的文件
              let key = null; // 上传后文件资源名以设置的 key 为主，如果 key 为 null 或者 undefined，则文件资源名会以 hash 值作为资源名。
              let config = {
                useCdnDomain: true, //表示是否使用 cdn 加速域名，为布尔值，true 表示使用，默认为 false。
                region: qiniu.region.z2 // 根据具体提示修改上传地区,当为 null 或 undefined 时，自动分析上传域名区域};
              };

              let putExtra = {
                fname: "", //文件原文件名
                params: {}, //用来放置自定义变量
                mimeType: null //用来限制上传文件类型，为 null 时表示不对文件类型限制；限制类型放到数组里： ["image/png", "image/jpeg", "image/gif"]
              };
              let observable = qiniu.upload(file, key, resultObj, putExtra, config);

              observable.subscribe({
                next: (res) => {//主要用来展示进度
                  let total = res.total;
                },
                error: (err) => {//失败报错信息
                  this.$vux.toast.text("图片上传失败，请重试[" + err.message + "]", "middle");
                },
                complete: (res) => {//接收成功后返回的信息
                  this.picture = "http://pic.lanpin123.com/" + res.hash;
                  console.log(this.picture)
                }
              })
            });
          })
        }
      },
      queryWork() {
        this.$vux.loading.show({
          text: '加载中',
        });

        let params = {
          "workId": this.workId,
          "sgin": this.identity
        };
        queryIssueWorkDetail(params).then((res) => {
          console.log(JSON.stringify(res));
          if (res.code == 0 && res.data != null) {
            this.mechanismName = res.data.mechanismName;//企业名称
            this.picture = res.data.workUrl;//招聘封面
            this.postName = res.data.workTypeName;//岗位名称
            this.workType = res.data.postType == 0 ? 2 : res.data.postType;//1小时2正式
            if (this.workType == 1) {
              this.hourMoney = res.data.workMoney;
            } else {
              let temp = res.data.wageRange;
              if (temp) {
                this.startMoney = temp.split("-")[0];
                this.endMoney = temp.split("-")[1];
              }
            }
            this.returnFee = res.data.reMoney; //返费金额
            if (res.data.reTime) {
              this.picker.push(res.data.reTime);//返费时间（单位：月）
            }

            this.salaryExplain = res.data.workSalary;//薪资福利
            this.foodExplain = res.data.eatSleep;//住宿餐饮
            this.workExplain = res.data.workDemand;//入职要求
          }
        });
      }
    },
    components: {
      PopupPicker
    }
  }
</script>

<style lang="less" scoped>
  @import "../../../assest/mixin";

  .edit-wrap {
    .wh(100%, 100%);
    background: @talent-theme-bg-color;
    .edit-box1 {
      margin-bottom: 0.267rem;
      .wh(100%, auto);
      background: @talent-bg-color;
    }
    .edit-box2 {
      margin-bottom: 0.267rem;
      .wh(100%, auto);
      background: @talent-bg-color;
      padding-top: 0.453rem;
      .pic-box {
        display: flex;
        justify-content: space-between;
        margin-left: 0.32rem;
        .wh(96.8%, 2.747rem);
        .pic-con {
          position: relative;
          margin-right: 0.32rem;
          .wh(2.4rem, 2.4rem);
          .upload {
            .wh(100%, 100%)
          }
          .picture {
            .wh(100%, 100%);
            border-radius: 0.08rem;
          }
          .photo {
            position: absolute;
            top: 0;
            opacity: 0;
            -ms-filter: 'alpha(opacity=0)';
            z-index: 999;
            .wh(100%, 100%);
          }
        }
      }
      .salary-box {
        display: flex;
        align-items: center;
        margin-left: 3.2%;
        .wh(96.8%, 1.333rem);
        border-bottom: @talent-border-bottom;
        .salary-con {
          display: flex;
          align-items: center;
          margin-left: auto;
          .salary {
            margin-right: 0.2rem;
            text-align: right;
            height: 0.6rem;
            line-height: 0.6rem;
            .size-color(0.427rem, rgba(51, 51, 51, 1));
          }
          .salary1 {
            width: 1.4rem;
            text-align: right;
            height: 0.6rem;
            line-height: 0.6rem;
            .size-color(0.427rem, rgba(51, 51, 51, 1));
          }
          .line {
            width: 0.2rem;
            height: 0.027rem;
            background: rgba(51, 51, 51, 1);
            margin-left: 0.1rem;
            margin-right: 0.1rem;
          }
          .salary2 {
            width: 1.4rem;
            text-align: left;
            height: 0.6rem;
            line-height: 0.6rem;
            .size-color(0.427rem, rgba(51, 51, 51, 1));
          }
        }
        .cell {
          margin-right: 0.32rem;
          .size-color(0.427rem, rgba(51, 51, 51, 1));
        }
      }
      .fee-box {
        display: flex;
        align-items: center;
        margin-left: 3.2%;
        .wh(96.8%, 1.333rem);
        border-bottom: @talent-border-bottom;
        .fee {
          flex: 1;
          display: flex;
          justify-content: flex-end;
          padding-right: 0.2rem;
          height: 0.6rem;
          line-height: 0.6rem;
          .size-color(0.427rem, rgba(51, 51, 51, 1));
        }
        .fee /deep/ .vux-cell-primary .vux-popup-picker-placeholder {
          color: #CCCCCC;
        }
        .fee /deep/ .vux-cell-primary .vux-popup-picker-value {
          color: rgba(51, 51, 51, 1);
        }
        .fee /deep/ .weui-cell {
          flex: 1;
        }
        .fee /deep/ .vux-popup-picker-select {
          text-align: right !important;
        }
      }
    }
    .edit-box3 {
      margin-bottom: 0.267rem;
      .wh(100%, auto);
      background: @talent-bg-color;
    }
    .explain-box {
      display: flex;
      align-items: center;
      margin-left: 3.2%;
      .wh(96.8%, 1.333rem);
      border-bottom: @talent-border-bottom;
      .explain {
        .fj(center, flex-end);
        flex: 1;
        text-align: right;
        margin-right: 0.2rem;
        .wh(100%, 0.6rem);
        line-height: 0.6rem;
        .size-color(0.427rem, #ccc);
      }
    }
    .pic {
      margin-left: auto;
      margin-right: 0.32rem;
      .wh(0.32rem, 0.32rem)
    }
    .title {
      .size-color(0.427rem, rgba(51, 51, 51, 1));
    }
    .company-box {
      display: flex;
      align-items: center;
      margin-left: 3.2%;
      .wh(96.8%, 1.333rem);
      border-bottom: @talent-border-bottom;
      .name {
        display: flex;
        align-items: center;
        margin-left: auto;
        margin-right: 0.32rem;
        .company {
          text-align: right;
          height: 0.6rem;
          line-height: 0.6rem;
          .size-color(0.427rem, rgba(51, 51, 51, 1));
        }
      }
      .company-name {
        .fj(center, flex-end);
        flex: 1;
        text-align: right;
        margin-right: 0.2rem;
        .wh(100%, 0.6rem);
        line-height: 0.6rem;
        .size-color(0.427rem, rgba(51, 51, 51, 1));
      }
      .init-color {
        color: #CCCCCC;
      }
    }
    .lend-box {
      margin-left: 3.2%;
      display: flex;
      align-items: center;
      .wh(96.8%, 1.28rem);
      background: @talent-bg-color;
      margin-left: 3.2%;
      .lend-radio {
        display: flex;
        align-items: center;
        margin-left: auto;
        margin-right: 0.32rem;
        .lend {
          margin-right: 0.96rem;
        }
        .active /deep/ .van-radio__label {
          color: #FF8F33;
        }
      }
    }
    .btn-box {
      padding-top: 0.4rem;
      padding-bottom: 0.4rem;
      text-align: center;
      .wh(100%, 1.173rem);
      background: @talent-theme-bg-color;
      .btn {
        .wh(7.2rem, 1.173rem);
        background: @talent-button-color;
        .border-radius(0.16rem);
        .size-color-weight(0.453rem, rgba(255, 255, 255, 1), 500);
      }
    }

  }

</style>
